<template>
	<view class="container">
		<!-- <view class="top-bg"></view> -->
		<view class="left-top"></view>
		<view class="right-top"></view>
		<view class="right-bottom"></view>
		<view class="login-box">
			<view class="tab">
				<view class="tab-btn" @click="changeType(1)" :class="{'on': loginType == 1}">
					<view style="width: 73px;">快速登录</view>
					<view :class="[(loginType == 1) ? 'line' : 'none']"></view>
				</view>
				<view class="tab-btn" @click="changeType(2)" :class="{'on': loginType == 2}">
					<view style="width: 73px;">账号登录</view>
					<view :class="[(loginType == 2) ? 'line' : 'none']"></view>
				</view>
			</view>
			
			<view class="logo-box" v-if="loginType == 1">
				<image src="https://www.guizhouqy.com/storage/local/20250914/c20dabff99116a8d9cd7e83f2a786f7b.png" mode="aspectFit"></image>
			</view>

			<view class="fast-login" v-if="loginType == 1">
				<button class="login" @click="loginByAuth">授权登录</button>
			</view>
			<view class="fast-login" v-if="loginType == 2">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input type="text" maxlength="11" v-model="phone" placeholder="请输入手机号码" autocomplete="off" />
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input type="text" placeholder-class="input-empty" maxlength="20" password v-model="password"
						@input="inputChange" placeholder="请输入密码" autocomplete="off" />
				</view>

				<view class="login" @click="goLogin" :loading="logining">登录</view>
			</view>
			<view class="user-tips" style="width: 260px;">
				<checkbox-group @change="agreeChange">
					<checkbox :class="agree?'checked':' '" class="round red" :checked="agree" color="#e93323" />
				</checkbox-group>
				已阅读并同意 <text style="color:#C829F3" @click="agreement(5)">《用户协议》</text>和<text style="color:#C829F3"
					@click="agreement(9)">《隐私协议》</text>
			</view>
		</view>
		<view class="copyright">
			启友科技
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/config/app';

	export default {
		data() {
			return {
				phone: '',
				password: '',
				code: '',
				text: '获取验证码',
				agree: false,
				logining: false,
				loginType: 1,
				timeInterval: null,
				msg_type: 'login_sms_code',
				inWechat: false,
				pages: ['/pages/index/index', '/pages/meadowlands/index', '/pages/my/index']
			}
		},
		onLoad() {

		},
		methods: {
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			// 改变登录方式
			changeType(type) {
				this.loginType = type
			},
			// 同意
			agreeChange(val) {
				this.agree = (val.detail.value.length == 1) ? true : false
			},
			// 协议前往
			agreement(id) {
				uni.navigateTo({
					url: `/pages/public/agreement?id=${id}`
				})
			},
			// 授权登录
			loginByAuth(data) {
				if (data.errMsg) {
					this.$tool.error('小程序权限错误:' + data.errMsg);
					return;
				}

				if (!this.agree) {
					this.$tool.error('请同意用户协议');
					return false;
				}

				uni.showLoading({
					title: '登陆中'
				});

				uni.login({
					provider: 'weixin',
					success: async (loginRes) => {
						// 获取 code
						const code = loginRes.code;

						let res2 = await this.$api.login.miniappAuth.post({
							login_code: code,
							spId: uni.getStorageSync('spId')
						})
						uni.hideLoading();
						if (res2.code == 0) {
							this.$tool.success(res2.msg);
							setTimeout(() => {
								this.afterLogin(res2)
							}, 1000)

						} else {
							this.$tool.error(res2.msg);
						}
						// 调用获取用户信息的接口
						// uni.getUserInfo({
						// 	provider: 'weixin',
						// 	success: async (infoRes) => {
						// 		// 获取用户信息
						// 		const userInfo = infoRes.userInfo;
						// 		let res2 = await this.$api.login.miniappAuth.post({
						// 			login_code: code,
						// 			spId: uni.getStorageSync('spId')
						// 		})
						// 		uni.hideLoading();
						// 		if (res2.code == 0) {
						// 			this.$tool.success(res2.msg);
						// 			setTimeout(() => {
						// 				this.afterLogin(res2)
						// 			}, 1000)

						// 		} else {
						// 			this.$tool.error(res2.msg);
						// 		}
						// 	},
						// 	fail: (err) => {
						// 		console.log(err);
						// 		this.$tool.msg('获取用户信息失败')
						// 	}
						// });
					},
					fail: (err) => {
						this.$tool.msg('登录失败')
					}
				});
			},
			// 登录后动作
			afterLogin(res2) {
				let pageUrl = uni.getStorageSync('login_front')
				if (pageUrl == 'pages/public/login' || pageUrl == 'pages/public/wechat_login') {
					pageUrl = ''
				}
				// 设置store
				this.$store
					.dispatch('login', res2)
					.then(() => {
						if (!pageUrl) {
							uni.switchTab({
								url: '/pages/user/user'
							})
						} else {
							if (this.pages.indexOf(pageUrl) != -1) {
								uni.switchTab({
									url: pageUrl
								})
							} else {
								uni.redirectTo({
									url: pageUrl
								})
							}
						}
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},
			// 前往登录
			async goLogin() {
				if (!this.agree) {
					this.$tool.error('请同意用户协议');
					return false;
				}

				if (this.phone == '' || !/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.phone)) {
					this.$tool.error('请输入手机号');
					return false;
				}

				if (this.password == "") {
					this.$tool.error('请输入密码');
					return false;
				}

				this.logining = true;
				wx.login({
					success: async (wxRes) => {
						let res = await this.$api.login.loginByAccount.post({
							phone: this.phone,
							password: this.password,
							login_code: wxRes.code,
						});

						if (res.code === 0) {
							this.afterLogin(res)
						} else {
							this.$tool.error(res.msg);
							this.logining = false;
						}
					}
				})

				return false;
			}
		}
	}
</script>

<style lang='scss'>
	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: rgba(36, 15, 65, 1);
		padding-top: 160rpx;
		display: flex;
		justify-content: center;
	}

	.top-bg {
		height: 200px;
		background-color: #e93323;
		background-image: url(https://www.guizhouqy.com/login-bg.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.login-box {
		width: 80%;
		z-index: 6;

		.tab {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 26px;
			margin: 20px;
			color: #999;

			.tab-btn {
				margin: 0 16px 0 24px;
				color: #999999;
				font-weight: 700;
				width: 128rpx;

				&.on {
					font-size: 18px;
					color: #FFFFFF;
				}

				.none {
					width: 41px;
					height: 3px;
				}

				.line {
					width: 41px;
					height: 3px;
					background: linear-gradient(313deg, #7116E9 0%, #15D1E2 100%);
					border-radius: 2px;
					margin: 5px auto 0 auto;
					animation: myfirst-data-v-7e561a65 .3s;
					-webkit-animation: myfirst-data-v-7e561a65 .3s;
				}
			}

		}
		
		.logo-box {
			width: 100%;
			display: flex;
			align-items: center;
		}
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: linear-gradient(180deg, rgba(154, 36, 185, 0.2) 0%, rgba(133, 22, 233, 0.2) 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #9A24B9;
		height: 120upx;
		/* border-radius: 4px; */
		margin-bottom: 50upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: #FFFFFF;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: #FFFFFF;
			width: 100%;
		}
	}

	.text-box {
		font-size: 13px;
		position: absolute;
		color: #FF5722;
		right: 50px;
		margin-top: 5px;
	}

	.login {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 44px;
		margin-top: 24px;
		background: linear-gradient(90deg, #C829F3 0%, #4516CA 100%);
		border: 2rpx solid #9A24B9;
		border-radius: 62px;
		color: #fff;
		font-size: 15px;
	}

	.copyright {
		width: 338px;
		position: fixed;
		bottom: 15px;
		left: 50%;
		margin-left: -169px;
		font-size: 10px;
		color: #999;
		text-align: center;
	}

	.user-tips {
		margin-top: 10px;
		display: flex;
		font-size: 12px;
		align-items: center;
		color: #FFFFFF;
	}

	uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
		width: 19px;
		height: 19px;
	}

	.round .wx-checkbox-input {
		border-radius: 50%;
		width: 35rpx;
		height: 35rpx;
	}
</style>